<template>
	<div class="self">
		<div class="warrp">
			<div class="iconfont back-icon" v-show="false" @click="backGo">&#xe624;</div>
			<div class="header-title">完善信息</div>
			<div class="avatar">
				<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(0)">
					<img class="avatar-img" v-if="lenImg0 === 0" :src="avatar"/>
					<img class="avatar-img" v-if="imgU0" id="showImg" :src="imgU0" />								
					<input type="file" @change="onFileChange0" style="display:none;" accept="image/*,type/face" id="upfile0">
				</div>		
				<div class="desc">{{this.avatarDesc}}</div>
			</div>
			<div class="bg-img">
				<img :src="avatar" height="100%" width="100%" alt="" />				
			</div>
			<div class="drop"></div>
		</div>
		<div class="content">
			<group label-width="5.5em" label-margin-right="2em" >
				<!--<popup-picker title="主营业务" :data="list1" v-model="value1"  :placeholder="$t('please select')"></popup-picker>-->
				<x-input title="宝店名称" v-model="shopName" placeholder="请输入店铺名称"></x-input>		    	
		    	<x-input title="身份证姓名" :is-type="'china-name'" v-model="userName" placeholder="请输入您身份证上的姓名" type="text"></x-input>
		    	<x-input @on-blur="idCardVaild" :min="15" :max="18" title="身份证号码" v-model="idCard" placeholder="请输入您的身份真的号码"></x-input>
				<div class="id-cart vux-1px-t">
			    	<div class="left">
			    		<h3 class="title">手持身份证照</h3>
			    	</div>
			    	<div class="right">
			    		<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(1)">
			    			<div class="desc iconfont" v-if="lenImg1 === 0">&#xe601;</div>
			    			<div class="uploading" v-show="loadingUp1"><spinner :type="'ios'"></spinner></div>	
							<img v-if="imgU1" id="showImg" :src="imgU1" />								
							<input type="file" accept="image/*,type/cid_front" @change="onFileChange1" style="display:none;" id="upfile1">
						</div>
			    	</div>
		    	</div>		    	
			</group>
			<div class="split"></div>
				<div v-show="storeType">
					<div class="id-cart vux-1px-t">
				    	<div class="left">
				    		<h3 class="title">营业执照</h3>
				    		<p class="desc">{{upDesc}}</p>
				    	</div>
				    	<div class="right">
				    		<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(2)">
				    			<div class="desc iconfont" v-if="lenImg2 === 0">&#xe601;</div>
				    			<div class="uploading" v-show="loadingUp2"><spinner :type="'ios'"></spinner></div>	
								<img v-if="imgU2" id="showImg" :src="imgU2" />								
								<input type="file" accept="image/*,mode/camera,type/company" @change="onFileChange2" style="display:none;" id="upfile2">
							</div>
				    	</div>
			    	</div>
					<div class="id-cart vux-1px-t" v-show="type != 4">
				    	<div class="left">
				    		<h3 class="title">银行开户许可证</h3>
				    		<p class="desc">{{upDesc}}</p>
				    	</div>
				    	<div class="right">
				    		<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(3)">
				    			<div class="desc iconfont" v-if="lenImg3 === 0">&#xe601;</div>
				    			<div class="uploading" v-show="loadingUp3"><spinner :type="'ios'"></spinner></div>	
								<img v-if="imgU3" id="showImg" :src="imgU3" />								
								<input type="file" accept="image/*,mode/camera,type/company" @change="onFileChange3" style="display:none;" id="upfile3">
							</div>
				    	</div>
			    	</div>
					<div class="id-cart vux-1px-t" v-show="type != 4">
				    	<div class="left">
				    		<h3 class="title">企业法人身份证</h3>
				    		<p class="desc">{{upDesc}}</p>
				    	</div>
				    	<div class="right">
				    		<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(4)">
				    			<div class="desc iconfont" v-if="lenImg4 === 0">&#xe601;</div>
				    			<div class="uploading" v-show="loadingUp4"><spinner :type="'ios'"></spinner></div>	
								<img v-if="imgU4" id="showImg" :src="imgU4" />								
								<input type="file" accept="image/*,mode/camera,type/cid_front" @change="onFileChange4" style="display:none;" id="upfile4">
							</div>
				    	</div>
			    	</div>
		    	</div>		    			    	
		   </div>
		   <div class="split"></div>
	    	<group label-width="5.5em" label-margin-right="2em" >	    		
		    	<x-input title="手机号码" type="text" v-model="phone" :min="11" :max="11" placeholder="请输入11位本人手机号码"></x-input>
		    	<x-input title="获取验证码" type="text" :show-clear="false" class="weui-vcode" v-model="validateCode">
        			<div class="vali-code vux-1px-l" slot="right" @click="getPhone">获取验证码</div>
      			</x-input>
	    	</group>
	    	<a href="https://www.mofing.com/utils/docs/content/10401.html">
	    		<div class="agreement"><div	 class="text">&lt;&lt;开通宝店协议规则&gt;&gt;</div></div>
	    	</a>
	    	<div class="btn" @click="submitForm">提交审核</div>
	    	<div class="bottom-bar"></div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { iosOrAndr } from '@/assets/js/isIos'
	import {getUrlParam}  from '@/assets/js/getUrlParam'
	import { PopupRadio , GroupTitle, Group, Cell, XInput, Selector, PopupPicker, XButton, XNumber, Spinner, XAddress, XTextarea, XSwitch } from 'vux'
	export default{
		name : "selfOpen",
		data(){
			return{				
				avatar   : require('../../assets/images/groups/upload.jpg'),
				upAvatar : require('../../assets/images/groups/upload.jpg'),
				shopName :'',		//商店名称
				userName : '', 	//用户姓名
				idCard : '', 		//身份证号码
				phone : '', 	//手机号码
				validateCode : '', 	//验证码
				cate    :[],
				lenImg0	: 0,
				lenImg1 : 0,
				lenImg2	: 0,
				lenImg3 : 0,
				lenImg4	: 0,
				imgU0   : '',
				imgU1   : '',
				imgU2   : '',
				imgU3   : '',
				imgU4   : '',
				okUrl0   : '',
				okUrl1   : '',
				okUrl2   : '',
				okUrl3   : '',
				okUrl4   : '',
				storeInfo    : {},	//商业的商店信息
				storeCate    : {},	//服务范围
				timer        : null,
				prevInfo     : {},
				author       : {},
				shopType     : '',
				result       : '',//身份证号验证结果
				comefrom     : '',
				id           : '',
				upDesc       : '企业必填',
				loadingUp1   : false,
				loadingUp2   : false,
				loadingUp3   : false,
				loadingUp4   : false,
				sysType      : '',
				type         : '',
				fuid         : '',
				cateList     : [] //店铺业务分类
			}
		},
		mounted(){
			document.title = '创建店铺'
			this.userinfo = this.getParams()
			
			//调用获取服务范围的方法
			this.isWeChat()
			this.type = this.$route.query.type || ''
			this.fuid = getUrlParam('fuid') || 0
			console.log(this.type)
			this.getStoreCate()
			//this.getCateList()
			this.sysType = iosOrAndr()
			window.cameraResult = this.cameraResult		
		},
		methods:{
			//获取店铺的分类列表
//			getCateList(){
//				let info = {
//					userinfo : this.getParams(),
//					type     : this.cateType
//				}
//				this.$axiosPost('/api/onlinestore/getstorecate',{
//					data : JSON.stringify(info)
//				}).then(res => {
//					this.cateList = res
//				})
//			},
			backGo(){
				this.$router.go(-1)
			},
			submitForm(){
				let shopInfo = {
					userinfo     : this.userinfo,
					storeAvatar	 : this.okUrl0,
					cid 	 	 : Number(this.type),
					partform_type: '',
					storeName    : this.shopName,
					uname        : this.userName,
					scardid      : this.idCard,	
					scard_1      : this.okUrl1,
					licencePath	 : this.okUrl2,
					bank_licence : this.okUrl3,
				represent_idcard : this.okUrl4,
					phone        : this.phone,
					validateCode : this.validateCode,
					comefrom     : this.comefrom,
					id           : this.id
				}

				console.log(shopInfo)
				let result = this.validateForm()
				if(result.status){
					//存在fuid并且不为0
					//if(this.fuid && this.fuid != '0'){
						shopInfo.fuid = this.fuid
						this.$vux.loading.show({text: '提交中...'})
						this.$axiosPost('/api/onlinestore/storeApply',{
							data : JSON.stringify(shopInfo)
						}).then(res => {
							this.$vux.loading.hide()
							if(res.code === 200){
								this.$router.replace({path:'/examine',query:{status:0,fromin:'self'}})
							}
						})
					//}
					//不存在fuid或者为0
//					if(!this.fuid || this.fuid == '0'){
//						sessionStorage.setItem('shopInfo',JSON.stringify(shopInfo))
//						this.$router.replace({path:'/queryServerNum',query:{status:0,fromin:'self'}})
//					}
				}else{
					this.$vux.toast.text(result.msg, 'top')
				}
			},
//			getBackInfo(){
//				let hasBack = this.$route.query.hasBack
//				if(hasBack){
//					let info = {
//						userinfo : this.getParams()
//					}
//					this.$axiosPost('/api/onlinestore/getStoreReedit',{
//						data : JSON.stringify(info)
//					}).then( res => {
//						this.shopName =	res.storeName
//						this.userName = res.uname
//						this.idCard   = res.scardid
//						this.okUrl0   = res.storeAvatar	
//						this.avatar
//					shopInfo.storeAvatar = this.avatar
//					shopInfo.storeAvatar = this.avatar
//					shopInfo.storeAvatar = this.avatar
//					shopInfo.storeAvatar = this.avatar   = res.storeAvatar						
//						this.okUrl1   = res.scard_1
//						this.imgU1    = res.scard_1
//						this.okUrl2   = res.licencePath
//						this.imgU2    = res.licencePath
//						this.okUrl3   = res.bank_licence
//						this.imgU3    = res.bank_licence
//						this.okUrl4   = res.represent_idcard
//						this.imgU4    = res.represent_idcard
//						this.phone    = res.phone
//						this.comefrom = res.comefrom
//						this.id 	  = res.id
//					})
//				}
//				
//			},
			getStoreCate(){
				let info = {
					userinfo : this.getParams()
				}
				this.$axiosPost('/api/onlinestore/getStoreType',{
					data : JSON.stringify(info)
				}).then( res => {
					if(res){
						this.cate = res
						//this.getBackInfo()
					}
				})
			},
			getParams(){
				let userinfo = {
					uid   : getUrlParam('uid')   || getCookie('uid'),
					token : getUrlParam('token') || getCookie('token')
				}
				return userinfo
			},
			//获取手机验证码
			getPhone(e){
				let time = 60
				if(this.phone.length !== 11){
					this.$vux.toast.text('请输入11位手机号码','top')
					return
				}
				if(e.target.innerText !== '获取验证码'){
					return
				}
				if(this.timer){
					clearInterval(this.timer)
				}				
				if(e.target.innerText === '获取验证码'){
					this.timer = setInterval(()=>{
						e.target.innerText = --time
						if(e.target.innerText === '0'){
							e.target.innerText = '获取验证码'
							clearInterval(this.timer)
						}
					},1000)					
					this.$axiosPostno('/utils/sms/sendcode.json',{
							phone : this.phone,
							type  : 7						
					}).then( res => {
						
					})

				}					
			},
			cameraResult(type,fullPath,path){
					if(type === 'face'){
						this.avatar = fullPath
						this.okUrl0 = path
					}
					if(type === 'id_card'){
						this.imgU1 = fullPath
						this.okUrl1 = path
					}
					if(type === 'company'){
						this.imgU2 = fullPath
						this.okUrl2 = path
					}
					if(type === 'bank_card'){
						this.imgU3 = fullPath
						this.okUrl3 = path
					}
					if(type === 'r_idcard'){
						this.imgU4 = fullPath
						this.okUrl4 = path
					}				
			},
			autoClick(index) {
				if(this.comefrom === 2){
					if(index === 0){
						let type = ['album', 'camera']
						this.getWxUpId("avatar","okUrl"+index,type)
					}else{
						let type = ['camera']
						this.getWxUpId("imgU"+index,"okUrl"+index,type)
					}
					return
				}
				if(this.sysType === 'ios' && this.comefrom === 1){
					this.iosUpload(index)
					return
				}
				if(index === 0){
					document.getElementById("upfile0").click();
				}else if(index === 1){
					document.getElementById("upfile1").click();	
				}else if(index === 2){
					document.getElementById("upfile2").click();	
				}else if(index === 3){
					document.getElementById("upfile3").click();	
				}else if(index === 4){
					document.getElementById("upfile4").click();	
				}
			},
			iosUpload(index){
				if(index === 0){
					window.webkit.messageHandlers.MofingWKWebview.postMessage({type:'face'})
				}
				if(index === 1){
					window.webkit.messageHandlers.MofingWKWebview.postMessage({type:'id_card'})
				}
				if(index === 2){
					window.webkit.messageHandlers.MofingWKWebview.postMessage({type:'company'})
				}
				if(index === 3){
					window.webkit.messageHandlers.MofingWKWebview.postMessage({type:'bank_card'})
				}
				if(index === 4){
					window.webkit.messageHandlers.MofingWKWebview.postMessage({type:'r_idcard'})
				}
			},
			getWxUpId(name,okName,type){
				let _this = this
				this.$wxUploadImg({count: 1,sourceType:type},
				function(localId){
					_this[name] = localId;
				},function(data,localId){
					_this[okName] = data.url;//data.fullurl;
				});
			},
			//上传文件
			onFileChange0($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg0 = $event.target.files.length;
				if(this.lenImg0 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU0 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload : self.imgU0
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl0 = res.data.path
					        		self.avatar = res.data.fullpath
					        	}
					        })
			        }
		            reader.readAsDataURL(file);
			},
			//上传文件
			onFileChange1($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg1 = $event.target.files.length;
				if(this.lenImg1 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU1 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload :  self.imgU1
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl1 = res.data.path
					        	}
					        })
		            }
		            reader.readAsDataURL(file);
			},
			//上传文件
			onFileChange2($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg2 = $event.target.files.length;
				if(this.lenImg2 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU2 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload :  self.imgU2
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl2 = res.data.path
					        	}
					        })
		            }
		            reader.readAsDataURL(file);
			},
			//上传文件
			onFileChange3($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg3 = $event.target.files.length;
				if(this.lenImg3 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU3 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload :  self.imgU3
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl3 = res.data.path
					        	}
					        })
		            }
		            reader.readAsDataURL(file);
			},
			//上传文件
			onFileChange4($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg4 = $event.target.files.length;
				if(this.lenImg4 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU4 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload :  self.imgU4
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl4 = res.data.path
					        	}
					        })
		            }
		            reader.readAsDataURL(file);
			},
			idCardVaild(){
				let urlInfo = this.getParams()
				let codeinfo = {
					userinfo : {
						uid   : urlInfo.uid   || '',
						token : urlInfo.token || ''
					},
					idCardVaild : this.idCard
				}
				if(this.idCard){
					this.$axiosPost('/api/Store/idCardVaild',{
						data : JSON.stringify(codeinfo)
					}).then( res => {
						if(res.status === 0){
							this.$vux.toast.text(res.msg,'top')
							this.result = false
							return
						}
						if(res.status === 1){
							this.result = true
						}
							
					})
				}
			},
			//表单验证
			validateForm(){
				let result = {
					status : false,
					msg    : ''
				}
				if(!this.okUrl0 && this.sysType !== 'ios'){
					result.msg = '请上传头像'
					return result
				}
				if((this.avatar === this.upAvatar) && (this.sysType === 'ios')){
					result.msg = '请上传头像'
					return result
				}
				if(!this.shopName){
					result.msg = '请填写宝店名称'
					return result
				}
				if(!this.userName){
					result.msg = '请填写您的姓名'
					return result
				}
				if(!this.result ){
					result.msg = '请输入正确的身份证号'
					return result
				}
				if(!this.imgU1){
					result.msg = '请上传手持身份证照'
					return result
				}
				if(this.type == 0){
					if(!this.imgU2){
						result.msg = '请上传营业执照'
						return result
					}
					if(!this.imgU3){
						result.msg = '请上传银行开户许可证'
						return result
					}
					if(!this.imgU4){
						result.msg = '请上传企业法人身份证'
						return result
					}
				}
				//这里营业执照，银行开户证，法人身份证可不上传
				if(this.type == 1){
					//上传了营业执照，就都得上传
					if(this.imgU2){
						if(!this.imgU3){
							result.msg = '请上传银行开户许可证'
							return result
						}
						if(!this.imgU4){
							result.msg = '请上传企业法人身份证'
							return result
						}						
					}
				}
				//实体店铺的营业执照
				if(this.type == 4){
					if(!this.imgU2){
						result.msg = '请上传营业执照'
						return result
					}
				}
				if(this.phone.length < 11){
					result.msg = '请输入11位手机号码'
					return result
				}
				if(!this.valiStatus){
					result.msg = '请输入正确的验证码'
					return result
				}
				result.status = true
				return result
			},
			isWeChat(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			    	this.$wxConfig()
			       	this.comefrom = 2    //微信
			    } else {
			        this.comefrom = 1	 //app
			    }
			}
		},
		computed:{
			avatarDesc(){
				let desc = '请上传头像'
				if(this.type == 2 || this.type == 0){
					desc = '请上传个人头像'
				}
				if(this.type == 1){
					desc = '请上传店铺头像'
				}
				return desc
			},
			storeType(){
				if(this.type == 1){
					this.upDesc = '个体无需上传/企业必须上传'
					return true
				}
				if(this.type == 0 ){
					this.upDesc = '企业必填'
					return true
				}
				if(this.type == 4 ){
					this.upDesc = ''
					return true
				}
				return false
			},
//			cateType(){
//				if(this.type == 1){
//					return 'onlinestore'
//				}
//				if(this.type == 4){
//					return 'direct'
//				}
//				if(this.type == 0){
//					return 'media'
//				}
//			}
		},
		watch:{
			validateCode(){
				if(this.validateCode.length === 6 && this.phone){
					let codeinfo = {
						userinfo : this.getParams(),
						phone : this.phone,
						code  : this.validateCode
					}
					this.$axiosPost('/api/store/smsVaild',{
						data : JSON.stringify(codeinfo)
					}).then( res => {
						if(res.status === 0){
							this.$vux.toast.text(res.msg,'top')
							this.valiStatus = false
						}
						if(res.status === 1){
							this.userinfo.uid   = res.uid,
							this.userinfo.token = res.token
							this.valiStatus = true
						}
					})
				}
			}
		},
		components:{
			Group,
	        GroupTitle,
	        Cell,
	        XInput,
	        Selector,
	        PopupPicker,
	        XAddress,
	        XNumber,
	        XTextarea,
	        XSwitch,
	        PopupRadio,
	        XButton,
	        Spinner
		}
	}
</script>

<style lang="less" scoped>
	@import '~styles/mixin.less';
	@import '~vux/src/styles/1px.less';

	.self /deep/ .weui-cells{
		margin-top: 0;
	}
	.self /deep/ .weui-label{
		white-space: nowrap;
	}
	.self /deep/ .weui-btn{	
		background:#ff1351;
	}
	.self /deep/ .weui-switch{
		background:#ff1351 ;
	}
	.self /deep/ .weui-switch:checked{
		border-color:#ff1351;
	}
	.self /deep/ .weui-cells_radio{
		max-height: 3rem;
	}
	.self{
		text-align: left;
		background: #fff;
		.warrp{
			position: relative;
			overflow:hidden;
			margin-top: 0;
			width:100%;
			height: 4.6rem;
			border-radius: 0 0 2rem 2rem / 0 0 4rem 4rem;
			.iphonex;
			.back-icon{
				z-index: 199;
				position: absolute;
				top: .65rem;
				left: .3rem;
				height: .5rem;
				width: .5rem;
				line-height: .5rem;
				text-align: center;
				font-size: .24rem;
				color: #fff;
				background: rgba(0,0,0,.5);
				border-radius: 50%;
			}
			.header-title{
				z-index: 199;
				position: absolute;
				width: 2rem;
				left: 50%;
				top: .35rem;
				margin-left: -1rem;
				text-align: center;
				color: #fff;
				font-size: .34rem;
				text-shadow: .05rem .05rem .1rem rgba(0,0,0,.5);
			}
			.avatar{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -1rem;
				margin-left: -1rem;
				z-index: 99;
				height: 2rem;
				width: 2rem;
				border: 1px solid #fff;
				border-radius: 50%;
				.upload_imgs{
					width: 100%;	
					height: 100%;							
					display: flex;
					flex-flow: wrap;				
					align-items: center;	
					position: relative;
					border-radius:50%;
					background: #eee;
					.avatar-img{
						border-radius: 50%;
					}
					img{
						height: 100%;
						width: 100%;
						border-radius: 50%;
					}	
				}
				.desc{
					width: 100%;
					line-height: .5rem;
					text-align: center;
					z-index: 100;
					color: #fff;
					font-size: .2rem;
					text-shadow: .05rem .05rem .1rem rgba(0,0,0,.5);
				}
			}
			.bg-img{
				z-index: -100;
				width: 100%;
				height: 100%;
				filter: blur(.2rem);
			}	
			.drop{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 50;
				height: 100%;
				width: 100%;
				background: rgba(255,255,255,.2);
			}		
		}
		.title{
			line-height: .8rem;
			text-align: center;
		}
		.vali-content{
			position: relative;
			padding: 0 .3rem .6rem .3rem;
			display: flex;
			.avatar{
				overflow: hidden;
				height: 1.6rem;
				width: 1.6rem;
				border-radius: .1rem;
			}
			.vali-desc{
				flex: 1;
				margin-left: .2rem;
				.desc2{
					margin-top: .3rem;
					color:#9a9a9a ;
				}
			}
			.vali-btn{
				position: absolute;
				bottom: .1rem;
				right: .4rem;
				width: 1.5rem;
				height: .5rem;
				line-height: .5rem;
				text-align: center;
				color: #2a64f7;
				border: 1px solid #2a64f7;
				border-radius: .3rem;
				font-size: .2rem;
			}
		}
		.split{
			height: .28rem;
			background: #eee;
		}
		.demo{
			padding: .2rem .3rem;
			background: #eee;
			.demo-title{
				line-height: .6rem;
			}
			.demo-desc{
				color: #666666;
				font-size: .2rem;
			}
			.demo-img{
				overflow: hidden;
				margin: 0 auto;
				width: 4.4rem;
				height: .8rem;
			}
		}
		.split{
			height: .28rem;
			background: #eee;
		}
		.agreement{
			padding: 0 .3rem;
			line-height: 1rem;
			color: #d49931;
			.text{
				margin: .3rem auto;
				min-width: 2.9rem;
				height: .4rem;
				line-height: .4rem;
				text-align: center;
			}
		}
		.vali-code{
			width: 1.4rem;
			padding-left: .2rem;
			text-align: center;
			font-size: .24rem;
			color: #7ec420;
		}
		.id-cart{
			position: relative;
			display: flex;
			padding: .2rem .3rem;
			height: 1.6rem;	
			line-height: 1.2rem;
			font-size: .34rem;	
			.left{
				display: flex;
				flex-direction: column;
				justify-content: center;
				white-space: nowrap;
				width: 1.88rem;
				font-size: .28rem;				
				margin-right: .68rem;
				.title{
					text-align: left;
					line-height: .54rem;				
				}	
				.desc{
					line-height: .44rem;
				}			
			}
			.right{
				position: relative;
				flex: 1;				
				font-size: .28rem;
				color: #757575;
				text-align: right;	
				.upload_imgs {
					position: absolute;
					right: 0;
					width: 60%;	
					height: 1.2rem;								
					border: 1px dashed #ccc;
					border-radius: .15rem;
					display: flex;
					flex-flow: wrap;				
					align-items: center;		
					.desc{
						font-size: .4rem;
						width: 100%;
						color: #ccc;
						text-align: center;
					}	
					.uploading{
						z-index: 150;
						position: absolute;
						right: 40%;
						top: -.2rem;
					}	
					#showImg {					
						width: 60%;
						height: 1rem;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
				}
			}
		}
		.upload_ok{
			margin: .04rem auto;
			width: 85%;	
			height: 1.2rem;								
			border-radius: .1rem;
			display: flex;
			flex-flow: wrap;				
			align-items: center;	
			position: relative;	
			.desc{
				width: 100%;
				text-align: center;
			}	
			#showImg {					
				width: 50%;
				height: 1rem;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
		}
		.btn{
			margin: 0 auto;
			width: 90%;
			height: .8rem;
			line-height: .8rem;
			text-align: center;
			background: #7ec420;
			color: #fff;
			border-radius: .1rem;
		}
		.bottom-bar{
			height: .3rem;
			background: #fff;
		}
	}
</style>